<template>
	<view>
		<u-navbar v-if="tab_id!=0"
			@leftClick="tab_id=0"
			:autoBack="false"
			leftIconColor="rgba(255, 255, 255, 1)"
			:placeholder="false"
			bgColor="rgba(243, 243, 243, 0)"
			
		>
		</u-navbar>
		<view style="margin-bottom: 50rpx;">
			<headerVue :cur="datas" ></headerVue>
		</view>
		
		<view class="tabs">
			<u-tabs :current="tab_id" :scrollable="false" :list="list_tab" @click="click" lineColor="rgba(0, 0, 0, 1)"
				activeStyle="color:rgba(0, 0, 0, 1)" lineWidth="60rpx"></u-tabs>
			<u-line margin="-9rpx" :hairline="false"></u-line>
		</view>
		<view v-if="tab_id==0" class="v_if">
			<view style="margin-left: 22.3rpx; margin-right: 22.3rpx;margin-bottom: 52.6rpx;">
				<u--text class="parse" :text="datas.content" lines="5"></u--text>
				
			</view>
			<u--text color="rgba(212, 48, 48, 1)" iconStyle="font-size: 18px;" align="center" text="查看更多>>"
				@click="judgment"></u--text>
			<u-line :hairline="false"></u-line>
			<view v-if="datas.video_src!=''">
				<view>
					<button class="but">视频简介</button>
				</view>
				<video class="v_if_index_video" :poster="oss_host+datas.video_src+index_video_cover"
					:src="oss_host+datas.video_src" controls="true" object-fit="contain"></video>	
			</view>
			
			<view>
				<button class="but">茄子记录</button>
			</view>
			<table class="tab" border="1">
				<tr>
					<td width="140rpx">制作时间</td>
					<td width="512.3rpx">{{datas.makeTime}}</td>
				</tr>
				<tr>
					<td>制作单位</td>
					<td>{{datas.makeDw}}</td>
				</tr>
				<tr>
					<td>资料来源</td>
					<td>{{datas.makeLy}}</td>
				</tr>
			</table>
		</view>
		<!-- 人物关系 -->
		<view v-else-if="tab_id==1" class="v_if">
			<view v-if="list.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<view>
				<u-popup :show="show" @close="close" customStyle="width: 606rpx; height: 790rpx;" mode="center"
					:closeable="true" round="20">
					<view class="popu">
						<text>关系介绍</text><br>
						<image class="popu_img" :src="oss_host+rbc.image"></image>
						<view class="popu_tex">
							<text>{{rbc.name}}</text><br>
							<text class="text1">{{rbc.guanxi}}</text>
						</view>

					</view>
					<view class="popu_text">
						<view style="margin-bottom: 37rpx;">亲友介绍</view>
						<view v-if="rbc.des==''">
							<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
						</view>
						<u--text :text="rbc.des"></u--text>
					</view>

				</u-popup>
			</view>
			<view style="margin-bottom: 76.7rpx;">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="character(listItem)">
						<image class="v_if_img" :src="oss_host+listItem.image"></image>
						<text class="grid-text V_if_text0">{{listItem.name}}</text>
						<text class="grid-text V_if_text1">{{listItem.guanxi}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 相关视频 -->
		<view v-else-if="tab_id==2" class="v_if">
			<view v-if="video.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<view>
				<u-popup :show="show1" @close="close" mode="center" :closeable="true">
					<video id="myVideo" :src="oss_host+video_url" controls="true" object-fit="contain"
						autoplay="true"></video>
				</u-popup>
			</view>
			<view style="margin-bottom: 76.7rpx;">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in video" :key="listIndex" @click="video1(listItem)">
						<image class="v_if_video" :src="oss_host+listItem+video_cover"></image>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 人物相册 -->
		<view v-else-if="tab_id==3" class="v_if">
			<view v-if="urls2.length==0">
				<u-loadmore loadmoreText="没有更多了" lineColor="#b7b7b7" dashed line />
			</view>
			<u-album :urls="urls2" multipleSize="219rpx" :maxCount="albumWidth"></u-album>
		</view>
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop" top="300"></u-back-top>
		</view>
		<view style="height: 100px;"></view>
		<view>
			<u-popup :show="datas.is_accpass==1"  customStyle="width: 606rpx; height: 790rpx;" bgColor="#eafdff" mode="center" round="20">
				<view style="display: flex; align-items: center; justify-content: center;
					height: 100%; text-align: center;">
					<u--form>
						<view>访问密码</view>
					<view style="margin-top: 35px;">
						<u--input v-model="accpass" style="background-color: #ffffff;" border="none"
						placeholder="请输入访问密码"></u--input>
					</view>
					<view style="color: red;">{{msg}}</view>
					<view style="margin-top: 35px;">
						<button style="background-color: rgba(60, 154, 252, 1);" @click="conns">确认</button>
					</view>
					</u--form>	
				</view>
				
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		api_host,
		video_cover,
		index_video_cover,
		oss_host
	} from '../../utils/appInfo'
	import headerVue from './header.vue'
	export default {
		components: {
			headerVue
		},
		data() {
			return {
				accpass:"",
				scrollTop: 0,
				oss_host: oss_host,
				video_cover: video_cover,
				index_video_cover:index_video_cover,
				api_host: api_host,
				datas: {},
				_id: 0,
				show: false,
				show1: false,
				show2: 0,
				tab_id: 0,
				list_tab: [{
					name: '人物简介'
				}, {
					name: '人物关系'
				}, {
					name: '相关视频'
				}, {
					name: '人物相册'
				}],
				//人物关系
				list: [],
				rbc: {
					image: "",
					name: "",
					guanxi: "",
					des: ""
				},
				video_url: "",
				video: [],

				//相册
				albumWidth: 13,
				urls2: [],
				msg:""
			}
		},
		onLoad(res) {
			this._id = res.id
			this.api.getIndex({
				id: this._id
			}).then(res => {
				if (res.data.name == "") {
					uni.navigateTo({
						url: "../edit/pass_verif?id=" + this._id
					})
				} else {
					this.datas = res.data
					uni.setNavigationBarTitle({
						title: this.datas.name
					})
				}
			})
			this.api.getGuanxi({
				id: this._id
			}).then(res => {
				this.list = res.data
			})
			this.api.getVideo({
				id: this._id
			}).then(res => {
				this.video = res.data
			})
			this.api.getImage({
				id: this._id
			}).then(res => {
				this.urls2 = res.data
				this.albumWidth = res.data.length
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			click(item) {
				this.tab_id = item.index
			},
			close() {
				this.show = false
				this.show1 = false
			},
			character(rbc) {
				this.rbc.image = rbc.image
				this.rbc.name = rbc.name
				this.rbc.guanxi = rbc.guanxi
				this.rbc.des = rbc.des
				this.show = true
			},
			video1(ur) {
				this.show1 = true
				this.video_url = ur
			},
			judgment() {
				uni.navigateTo({
					url: "./introduction?id=" + this._id
				})
			},
			conns(){
				if(this.accpass==this.datas.accpass){
					this.datas.is_accpass=0
				}else{
					this.accpass=""
					this.msg="密码错误"
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		height: 50rpx;

	}

	.tabs {
		margin-top: 350rpx;
		margin-left: 36.6rpx;
		margin-right: 36.6rpx;
	}

	.v_if {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 52.6rpx;

		.parse {
			line-height: 50rpx;
			/* 根据实际字体大小设置 */
			max-height: 300rpx;
			/* 行高的3倍，即显示3行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 当文本超过指定行数时显示省略号 */
			display: -webkit-box;
			/* 弹性盒子模型显示 */
			-webkit-line-clamp: 6;
			/* 限制在3行 */
			-webkit-box-orient: vertical;
		}

		.v_if_index_video {
			margin-top: 19rpx;
			width: 652.3rpx;
			margin-left: 22.3rpx;
			margin-right: 22.3rpx;
		}

		.but {
			margin-top: 19rpx;
			background-color: rgba(246, 145, 55, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			border-radius: 30px;
			width: 153rpx;
			height: 42rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 20.27px;
			text-align: left;
			vertical-align: top;
		}

		.tab {
			background-color:rgba(243, 243, 243, 1) ;
			margin-top: 19rpx;
			border-collapse: collapse;
			width: 652.3rpx;
			height: 427rpx;
			margin-left: 22.3rpx;
			margin-right: 22.3rpx;
		}

		.popu {
			margin-top: 50rpx;
			margin-left: 65rpx;
			margin-right: 65rpx;

			.popu_img {
				float: left;
				margin-top: 20rpx;
				margin-left: -15rpx;
				width: 215rpx;
				height: 215rpx;
				border-radius: 40px;
			}

			.popu_tex {
				float: left;
				margin-top: 40rpx;
				margin-left: 54rpx;
				line-height: 80rpx;

				.text1 {
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		.popu_text {
			margin-top: 37rpx;
			margin-left: 65rpx;
			margin-right: 65rpx;
			font-size: 35rpx;
		}

		.v_if_img {
			border-radius: 50px;
			width: 112rpx;
			height: 112rpx;
		}

		.v_if_video {
			margin-bottom: 17.4rpx;
			width: 220rpx;
			height: 226rpx;
			opacity: 1;
			border-radius: 10px;
		}

		.V_if_text0 {
			margin-top: 28rpx;
			font-size: 28rpx;
			color: rgba(0, 0, 0, 1);
		}

		.V_if_text1 {
			margin-bottom: 24.4rpx;
			font-size: 24.4rpx;
			color: rgba(153, 153, 153, 1);
		}
	}
</style>